<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-form-item label="卡片列表栅格宽度">
                <el-input-number v-model="propJson.cardSpan" :min="1" :max="24"/>
            </el-form-item>

            <el-form-item label="卡片列表栅格间隔">
                <el-input-number v-model="propJson.gutterSize" :min="0"/>
            </el-form-item>

            <el-form-item label="卡片列表行间隔">
                <el-input-number v-model="propJson.rowHeight" :min="0"/>
            </el-form-item>

            <el-form-item label="卡片高度">
                <el-radio-group v-model="propJson.cardHeightType">
                    <el-radio label="AUTO">自适应高度</el-radio>
                    <el-radio label="CUSTOM">自定义高度</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="自定义高度" v-if="propJson.cardHeightType === 'CUSTOM'">
                <el-input v-model="propJson.cardHeight" style="width: 100%" placeholder="自定义高度"/>
            </el-form-item>

            <el-form-item label="卡片内上边距">
                <el-input v-model="propJson.cardPaddingTop" style="width: 100%" placeholder="卡片内上边距"/>
            </el-form-item>

            <el-form-item label="卡片内下边距">
                <el-input v-model="propJson.cardPaddingBottom" style="width: 100%" placeholder="卡片内下边距"/>
            </el-form-item>

            <el-form-item label="卡片内左边距">
                <el-input v-model="propJson.cardPaddingLeft" style="width: 100%" placeholder="卡片内左边距"/>
            </el-form-item>

            <el-form-item label="卡片内右边距">
                <el-input v-model="propJson.cardPaddingRight" style="width: 100%" placeholder="卡片内右边距"/>
            </el-form-item>

            <el-form-item label="卡片内容宽度">
                <el-input v-model="propJson.cardBodyWidth" style="width: 100%" placeholder="卡片内容宽度"/>
            </el-form-item>

            <el-form-item label="卡片阴影">
                <el-radio-group v-model="propJson.shadowType">
                    <el-radio label="never">无阴影</el-radio>
                    <el-radio label="hover">鼠标悬浮阴影</el-radio>
                    <el-radio label="always">始终阴影</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-divider>卡片列表变量数据获取</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.cardListValueParam ? propJson.cardListValueParam : {}" :commonParam="commonParam" />

            <el-divider>卡片列表变量映射</el-divider>
            <div style="display: flex; justify-content: center; align-items: center">
                <el-button type="primary" class="addCollapse" size="small" @click="addParamVariable()">添加映射参数</el-button>
            </div>
            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.paramVariableList">
                    <template #title>
                        <div class="collapseTitle">
                            <span>参数 {{(index + 1)}}</span>
                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteParamVariable(index)">删除</el-button>
                        </div>
                    </template>
                    <el-form-item label="来源类型">
                        <el-radio-group v-model="item.type">
                            <el-radio label="variable">关联变量</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="映射JSONPath" v-if="item.type === 'variable'">
                        <el-input v-model="item.globalVariableParamName" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="变量名称" v-if="item.type === 'variable'">
                        <el-select v-model="item.globalVariableName" placeholder="变量名称" style="width: 100%">
                            <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                        </el-select>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>
    </div>
</template>

<script>
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue"

export default {
    name: "CardListDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceValue
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    methods: {
        addParamVariable() {
            if (!this.propJson.paramVariableList) {
                this.propJson.paramVariableList = []
            }
            let variableInfo = {variableName: "", variableValue: "", variableType: "String", type: "variable", globalVariableName: "", globalVariableParamName:""}
            this.propJson.paramVariableList.push(variableInfo)
        },
        deleteParamVariable(index) {
            this.propJson.paramVariableList.splice(index, 1);
        }
    }
}
</script>

<style scoped lang="less">

</style>